<!DOCTYPE html>
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" /><!-- bootstrap -->
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script> <!-- jquery-validator -->
    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script><!-- layer -->
    <script type="text/javascript" src="/js/md5.min.js"></script><!-- md5.js -->
    <script type="text/javascript" src="/js/common.js"></script><!-- common.js -->
    <script type="text/javascript" src="/js/socket.js"></script><!-- common.js -->
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
    <div id="userTip" style="display: none">
        <span> 您还没有登录，请<a href="/login.html">登陆</a>后再操作<br/></span>
    </div>
    <span>没有收货地址的提示。。。</span>
</div>
<table class="table">
    <tr>
        <td>商品名称</td>
        <td colspan="3" id="goodName"></td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td colspan="3"><img id="goodImg" width="200" height="200" /></td>
    </tr>
    <tr>
        <td>秒杀开始时间</td>
        <td id="startDate"></td>
        <td id="seckillTip">
        </td>
        <td>
            <img id="verifyCodeImg" width="80" height="32"  onclick="initVerifyCodeImg()" style="display: none">
            <input id="verifyCode" style="display: none">
            <button class="btn btn-primary btn-block" type="button" id="buyButton" onclick="doSeckill()">立即秒杀</button>
        </td>
    </tr>
    <tr>
        <td>商品原价</td>
        <td colspan="3" id="goodPrice"></td>
    </tr>
    <tr>
        <td>秒杀价</td>
        <td colspan="3" id="seckillPrice"></td>
    </tr>
    <tr>
        <td>库存数量</td>
        <td colspan="3" id="stockCount"></td>
    </tr>
</table>
</div>
<script type="text/javascript">

        var socket;

      var seckillId;

    $(function (){
        seckillId=getQueryString("seckillId");
        initGood();
        initUser();
    });


    function initGood(){
        $.ajax({
            url: "http://localhost:9000/seckill/seckillGood/find?seckillId="+seckillId,
            type: "get",
            xhrFields: {withCredentials: true}, //启用cookie
            success:function (data) {
                if(data.code==200){
                    //填充表格中的数据
                    renderGood(data.data);
                }else{
                    layer.msg(data.msg)
                }
            }
        });
    }


    function renderGood(good){
        $("#goodName").html(good.goodName);
        $("#goodImg").prop("src",good.goodImg);
        $("#startDate").html(good.startDate);
        $("#goodPrice").html(good.goodPrice);
        $("#seckillPrice").html(good.seckillPrice);
        $("#stockCount").html(good.stockCount);
        //调用 时间
        initSeckillTime(good.startDate,good.endDate);

    }

    //秒杀时间  秒杀前  秒杀进行中。。  秒杀结束了
      //计时器
      var timer;
        var remainStartSeconds;//距离秒杀开始还有多长时间
        var remainEndSeconds;//距离秒杀结束还有多长时间

      function initSeckillTime(sDate,eDate){
          var statTime = new Date(sDate); //2024-12-19 10:00
          var endTime = new Date(eDate); //2024-12-19 12:00
          var now = new Date();//当前时间 2024-12-19 10:19

          remainStartSeconds=parseInt((statTime.getTime()-now.getTime())/1000);
          remainEndSeconds=parseInt((endTime.getTime()-now.getTime())/1000);

          timer =window.setInterval(showSeckillTip,1000);

      }

      function showSeckillTip(){
          remainStartSeconds--;
          remainEndSeconds--;

          if(remainStartSeconds>0){
              $("#seckillTip").html("距离很长秒杀开始还有"+remainStartSeconds+"秒");
              //按钮禁用
              $("#buyButton").prop("disabled",true);

          }else{
              if(remainEndSeconds>0){
                  $("#seckillTip").html("秒杀进行中.......");
                  $("#buyButton").prop("disabled",false);
              }else{
                  $("#seckillTip").html("秒杀结束!!!");
                  $("#buyButton").prop("disabled",true);
                  window.cleanData(timer);
              }

          }


      }



      function initUser(){
          $.ajax({
              url: "http://localhost:9000/member/token/getCurrent",
              type: "get",
              xhrFields: {withCredentials: true}, //启用cookie
              success:function (data) {
                  if(data.code==200){
                      //填充表格中的数据
                      renderUser(data.data);
                  }else{
                      layer.msg(data.msg)
                  }
              }
          });
      }


  var user;
      var uuid;
      function renderUser(u){
           if(u){
              user=u;
              uuid = getUuid(user.id);
           }else{
                $("#userTip").show();
           }
      }

        var socket;

  function  doSeckill(){
          if(!user){
              layer.msg("请先登录");
              return;
          }

      $.ajax({
          url: "http://localhost:9000/seckill/order/doSeckill",
          type: "post",
          xhrFields: {withCredentials: true}, //启用cookie
          data:{"seckillId":seckillId,"uuid":uuid},
          success:function (data) {
              if(data.code==200){
                  //填充表格中的数据
                  //renderUser(data.data);
                  //window.location.href="order_detail.html?orderNo="+data.data;
                  socket=createScoket(uuid);
              }else{
                  layer.msg(data.msg)
              }
          }
      });


  }

</script>
</body>
</html>